<template>
  <div class="user-comments">
    <div class="title">用户评价</div>
    <swiper
      ref="mySwiper"
      class="swiper"
      :modules="swiperOptions.modules"
      :slides-per-view="swiperOptions.slidesPerView"
      :space-between="swiperOptions.spaceBetween"
      :loop="swiperOptions.loop"
      :centered-slides="swiperOptions.centeredSlides"
      :autoplay="swiperOptions.autoplay"
      :navigation="swiperOptions.navigation"
      :pagination="swiperOptions.pagination"
    >
      <swiper-slide v-for="(comment, index) in comments" :key="index">
        <div class="comment-item">
          <img :src="comment.pice" class="avatar" />
          <div class="content">
            <div class="username">{{ comment.userName }}</div>
            <div class="text">{{ comment.content }}</div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    comments: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      swiperOptions: {
        modules: [Navigation, Pagination, Autoplay],
        slidesPerView: 1,
        spaceBetween: 20,
        loop: true,
        centeredSlides: false,
        autoplay: true, // 确保是布尔值
        navigation: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    };
  },
  mounted() {
  this.$nextTick(() => {
    const swiperInstance = this.$refs.mySwiper?.swiper;
    if (swiperInstance) {
      console.log('Swiper instance:', swiperInstance);
      console.log('Swiper slides:', swiperInstance.slides);
      console.log('Swiper initialized:', swiperInstance.initialized);
    } else {
      console.error('Swiper instance not found');
    }
  });
}

}
</script>

<style scoped>
.user-comments {
  position: relative;
  padding: 20px 40px;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  color: #007bff;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
}

.comment-item {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #e6f9ff 0%, #fff 100%);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.username {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 5px;
}

.text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.swiper-slide {
  width: 100%;
  height: auto;
}

.swiper-pagination {
  text-align: center;
  margin-top: 20px;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 1;
  border-radius: 50%;
}

.swiper-pagination-bullet-active {
  background: #007bff;
}
</style>
